<style>
    /*之所以要使用cloak是为了在页面vue效果还没有起作用前先把vue作用范围隐藏掉,等vue加载完成之后vue会自动把v-cloak部分通过vue作用过之后的效果展示出来*/
    [v-cloak] {
        display: none;
    }
</style>
<div class="card" id="commentApp" v-cloak="">
    <div class="card-header">
        <div>
            <button class="btn btn-primary btn-sm" @click.prevent="scrollTo">发表评论</button>
            <span class="float-right small text-secondary">评论数 {{$model->comment_num}} </span>
        </div>
    </div>
    <div class="card-body">
        <div class="comment mb-3" v-for="(comment,index) in comments" :id="'comment_'+comment.id">
            <div class="row">
                <div class="col-auto">
                    <a class="avatar" :href="'/member/space/home/'+comment.user.id">
                        <img :src="comment.user.icon"
                             class="avatar-img rounded-circle">
                    </a>
                </div>
                <div class="col ml--2">
                    <div class="comment-body" style="width: 100%">
                        <div class="row">
                            <div class="col">
                                <h5 class="comment-title" v-html="comment.user.name"></h5>
                            </div>
                            <div class="col-auto">
                                <time class="comment-time">
                                    @{{ comment.created_at }}
                                </time>
                            </div>
                        </div>
                        <p class="comment-text" v-html="comment.content"></p>
                        <small>#@{{ index+1 }}</small>
                        {{--prevent是阻止a标签原来的默认事件--}}
                        <a href="" @click.prevent="del(comment,index)" v-show="comment.user.id =={{auth()->id()}}"
                           class="badge badge-danger">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer text-muted">
        <div class="row align-items-start">
            <div class="col-auto">
                <div class="avatar">
                    <img src="{{auth()->user()->avatar}}"
                         class="avatar-img rounded-circle">
                </div>
            </div>
            <div class="col ml--2">
                <form id="commentForm">
                    <label class="sr-only">聊点什么吧</label>
                    <input type="hidden" v-model="field.model">
                    <input type="hidden" v-model="field.id">
                    <textarea class="form-control" v-model="field.content" placeholder="聊点什么吧" rows="2"></textarea>
                    <br>
                    <button type="button" class="btn btn-light btn-sm" @click="send">发表评论</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    require(['vue', 'hdjs', 'axios'], function (vue, hdjs, axios) {
        new vue({
            el: "#commentApp",
            data: {
                //评论集合
                comments: [],
                field: {
                    content: '',
                    model: "{!!str_replace('\\','-',get_class($model)) !!}",
                    id: "{{$model['id']}}"
                }
            },
         //vue中的mounted方法是在vue初始化之后首先加载执行的方法
            mounted() {
                this.loadComments();
            },
            updated(){
                hdjs.scrollTo('body','#comment_{{Request::query('comment_id')}}',500, {queue:true});
            },
            methods: {
                //启动时加载评论
                loadComments() {
                    let url = "{{route('common.comment.index')}}?id=" + this.field.id + "&model=" + this.field.model;
                    axios.get(url).then((response) => {
                        this.comments = response.data;
                })
                },
                //发表评论
                send() {
                    if (this.check()) {
                        //将当前发表评论的时间存放到用户的localStorage中,之所以没有放到session中是因为session是和会话相关的只是临时保存的,当前会话结束,session中的内容也就没有了
                        localStorage.setItem('comment_send_time', (new Date()) * 1);
                        axios.post("{{route('common.comment.store')}}", this.field)
                            .then((response) => {
                            this.comments.push(response.data)
                        this.field.content = ''
                    })
                    } else {
                        alert('评论发表过于频繁，请稍候操作');
                        return false;
                    }
                },
                //验证发送时间
                // 1.10+20  +       1.20
                check() {
                    let send_time = localStorage.getItem('comment_send_time');
                    let current_time = (new Date()) * 1;
                    return (send_time*1 + 3 * 1000) < current_time;
                },
                // [1,3].splice(1,1)
                del(comment, index) {
                    axios.delete("/common/comment/" + comment.id)
                        .then((response) => {
                            console.log(response);
                        this.comments.splice(index, 1);
                })
                },
                //滚动到发布框
                scrollTo(){
                    hdjs.scrollTo('body','#commentForm',1000, {queue:true});
                }

            }
        })

    })
</script>